<template>
  <div class="download">
    <el-table
      class="mt10"
      :data="tableData"
      :header-cell-style="{ background: '#f5f5f5' }"
      size="mini"
    >
      <el-table-column label="程序名" prop="name" width="200">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            :content="scope.row.description"
            effect="dark"
            placement="bottom-end"
          >
            <span>{{ scope.row.name }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="版本" prop="version" width="120" />
      <el-table-column label="MD5" prop="md5" width="300" />
      <el-table-column label="SHA1" prop="sha1" width="350" />
      <el-table-column label="构建时间" prop="build_time" width="180" />
      <el-table-column label="文件大小" prop="size" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="f12"
            icon="el-icon-download"
            type="text"
            @click="download(scope.row.download_uid)"
          >
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import download from "@/api/download";
import user from "@/api/user";
export default {
  name: "Client",
  data: () => {
    return {
      tableData: [],
      org_id: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    download(duid) {
      window.open(
        `/api/v1/download?org_id=${this.org_id}&duid=${duid}`,
        "_blank"
      );
    },
    getData() {
      user
        .info()
        .then(res => {
          this.org_id = res.data.org_id;
          return download.list({
            org_id: res.data.org_id
          });
        })
        .then(res => {
          this.tableData = res.data.list;
        });
    }
  }
};
</script>

<style scoped></style>
